<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/myapp.css" />
	</head>
	<style>
		.aui-content {
			margin-top: 15px;
		}
		.aui-ellipsis{
			overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
			/*width:200px;*/
		}
	</style>

	<body>
		<div class="aui-content">
			<ul class="aui-list-view" id="list">

			</ul>
		</div>
	</body>
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../script/api.js"></script>
	<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/html" id="listTem">
		{{each}}
		<li class="aui-list-view-cell aui-img aui-ellipsis" onclick="openArticle('{{$value.id}}')">
			{{if $value.thumb!=""}}
			<img class="aui-img-object aui-pull-left" src="{{$value.thumb}}"> {{else if $value.picture!=""}}
			<img class="aui-img-object aui-pull-left" src="{{$value.picture}}"> {{/if}}
			<div class="aui-img-body aui-ellipsis">
				{{$value.title}}
				<p class='aui-ellipsis-2'>{{$value.body}}</p>
			</div>
		</li>
		<li class="aui-list-view-cell aui-list-view-deliver"></li>
		{{/each}}
	</script>
	<script type="text/javascript">
		MYPAGE = {};
		MYPAGE.moredata = true;

		function openArticle(id) {
			var data = {
				id: id
			}
			api.openWin({
				name: 'article',
				url: 'article.html',
				pageParam: data
			});
		}

		function newdata(id, page) {
			var baseurl = MYAPP.webroot + "/api/index.php/Home/Article/articlelist/id/" + id;
			var url = baseurl + "/p/" + page;
			api.ajax({
				url: url,
				method: 'get',
				timeout: 30,
				dataType: 'json',
				returnAll: false
			}, function(ret, err) {
				if (ret.code == 200) {
					if (ret.msg == "no data") {
						var html = '<li class="aui-list-view-cell" style="text-align:center">暂无数据！</li>';
						document.getElementById("list").innerHTML = html;
						MYPAGE.moredata = false;
					} else {
						var html = template('listTem', ret.data);
						document.getElementById("list").innerHTML = html;
					}
				}
				api.refreshHeaderLoadDone();
			});
		}

		function moredata(id, page) {
			var baseurl = MYAPP.webroot + "/api/index.php/Home/Article/articlelist/id/" + id;
			var url = baseurl + "/p/" + page;
			api.ajax({
				url: url,
				method: 'get',
				timeout: 30,
				dataType: 'json',
				returnAll: false
			}, function(ret, err) {
				if (ret.code == 200) {
					if (ret.msg == "no data") {
						var html = '<li class="aui-list-view-cell" style="text-align:center">没有数据了！</li>';
						MYPAGE.moredata = false;
						document.getElementById("list").innerHTML += html;
					} else {
						var html = template('listTem', ret.data);
						document.getElementById("list").innerHTML += html;
					}
				}
			});
		}
		apiready = function() {
			var data = api.pageParam;
			var id = data.id;
			var page = 1;
			newdata(id, page);
			api.setRefreshHeaderInfo({
				visible: true,
				loadingImg: 'widget://image/refresh.png',
				bgColor: '#f2f2f2',
				textColor: '#717171',
				textDown: '下拉刷新...',
				textUp: '松开刷新...',
				showTime: true
			}, function(ret, err) {
				newdata(id, 1);
			});
			api.addEventListener({
				name: 'scrolltobottom'
			}, function(ret, err) {
				if (MYPAGE.moredata) {
					page = ++page;
					moredata(id, page);
				}
			});
		}
	</script>

</html>